<head>
	<!-- 页面字符编码 -->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<title></title>
	<script src="js/mui.min.js"></script>
	<link href="css/mui.min.css" rel="stylesheet" />
	<link href="css/comm.css" rel="stylesheet" />
	<link href="css/layout.css" rel="stylesheet" />
	<link href="css/iconfont.css" rel="stylesheet" />
	<script type="text/javascript" charset="UTF-8">
		mui.init();
	</script>
</head>

<body>
	<header class="mui-bar mui-bar-nav  mui-bar-bom mui-bar-white">
		<a class="iconfont icon-fanhui mui-pull-left"></a>
		<h1 class="mui-title mui-bar-title">消息管理</h1>
	</header>
	<div class="mui-content zjmx ">

		<div class="mui-scroll-wrapper mscrollSet mui-scroll-top">
			<div class="mui-scroll">
				<ul class="mui-mess-ul">
					<li class="current">
						<a href="javascript:;">我的消息</a>
					</li>
					<li>
						<a href="javascript:;">系统通知</a>
						<i class="red-point"></i>
					</li>

				</ul>

				<div class="mui-mess-content" style="display: block;">
					<div class="mui-rw mui-tx">

						<ul class="mui-table-view mui-rw-ul">

							<li class="mui-table-view-cell bm">
								<a href="javascript:;">

									<div class="mui-media-body">
										<em class="iconfont icon-xiaolaba mui-pull-left mui-laba-red"></em>
										<!--未读红色喇叭-->
										订单状态：您有一个待支付饭局！
										<span class="mui-pull-right iconfont icon-xiayibu">
											</span>
										<p>2016-03-24</p>
									</div>
								</a>
							</li>
							<li class="mui-table-view-cell bm">
								<a href="javascript:;">

									<div class="mui-media-body">
										<em class="iconfont icon-xiaolaba mui-pull-left"></em>收益提醒：饭局收益已到帐！
										<span class="mui-pull-right iconfont icon-xiayibu">
											</span>
										<p>2016-03-24</p>
									</div>
								</a>
							</li>
							<li class="mui-table-view-cell bm">
								<a href="javascript:;">

									<div class="mui-media-body">
										<em class="iconfont icon-xiaolaba mui-pull-left"></em>食客评价：您收到一条食客的评价!
										<span class="mui-pull-right iconfont icon-xiayibu">
											</span>
										<p>2016-03-24</p>
									</div>
								</a>
							</li>
						</ul>

					</div>
					<div class="mui-font-cont">
						<div class="mui-font-bom mt12">
							<p>已全部加载完毕</p>
						</div>
					</div>
					<div>&nbsp;</div>

				</div>
				<div class="mui-mess-content">
					<div class="mui-rw mui-tx">

						<ul class="mui-table-view mui-rw-ul">

							<li class="mui-table-view-cell bm">
								<a href="javascript:;">

									<div class="mui-media-body">
										<em class="iconfont icon-xiaolaba mui-pull-left"></em>订单状态：您有一个待支付饭局！
										<span class="mui-pull-right iconfont icon-xiayibu">
											</span>
										<p>2016-03-24</p>
									</div>
								</a>
							</li>
						</ul>
					</div>
					<div class="mui-font-cont">
						<div class="mui-font-bom mt12">
							<p>已全部加载完毕</p>
						</div>
					</div>
					<div>&nbsp;</div>
				</div>
			</div>
		</div>
	</div>
</body>

<script type="text/javascript" src="//apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-2.1.0.js"></script>
<script src="js/scroll-wrapper.js"></script>
<script type="text/javascript">
	mui('.mui-scroll-wrapper').scroll({
		deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
	});
	$(function() {
		window.onload = function() {
			var $li = $('.mui-mess-ul li');
			var $ul = $('.mui-mess-content');
			$li.click(function() {
				var $this = $(this);
				var $t = $this.index();
				$li.removeClass();
				$this.addClass('current');
				$ul.css('display', 'none');
				$ul.eq($t).css('display', 'block');
			})
		}
	});
</script>

</html>